'use client'
import * as React from "react";
import useResizeObserver from '@react-hook/resize-observer';
//import ResizeObserver from "resize-observer-polyfill";

/* 新的包 @react-hook/resize-observer 接替本hook;
注意：注入Spring动画时 const width= useMeasure(containerRef)?.width | 0;  避免报错NaN;
遇到了：useMeasure无法测量，不能依据target.current来重新去登記useResizeObserver，导致失效的！
* */
export const useMeasure = (target : React.RefObject<HTMLElement> | null) => {
    //【浏览器打印按钮】点击后出现true最后还有false;前面是真的打印预览，后面是屏幕也会更新重绘。 打印需要单独增加setSize切换指令！感觉用 useMedia 对打印切换情形不友好？ useMediaLayout
    //仅仅因为加了这一行检测：就会导致打印时刻 打印环节多1遍，打印后处理环节多2遍的render这里。【注意】css={{display: 'none'}只是导致测量为0值，但是target.current已经不是null了！
    //【打印页数定】始终在这里组件进入也就是printing切换时刻运行之前的。所以问题很大：打印内容页数可能尾部是空白或丢失。没法用这里办法解决的！
    const [size, setSize] = React.useState<DOMRectReadOnly|null>(null);

    //旧的 useLayoutEffect； 改成useEffect 却报错了Maximum update depth exceeded.
    React.useLayoutEffect(() => {
        // console.log("useLayoutEffect-@-- target=",target, size);
        target?.current && setSize(target?.current.getBoundingClientRect())
    }, [target, setSize])

    useResizeObserver(target, (entry) => {
        // console.log("useResizeObserver回调target=",target,"size",size,"setSize",entry.contentRect,);
        setSize(entry.contentRect)
    });
    if (typeof window === 'undefined') {
        return {
            width: 0,
            height: 0,
            top: 0,
            left: 0,
        };
    }

    if(!target){
        return new DOMRectReadOnly(0,0,0,0);
    }
    else if(!size){
        //打印的时候，若打印之前target是display:none被隐藏的情形，那么size是非空的={width:0}的话，也需要做个即刻测量。【关键】确保打印也能够保证获得div宽度结果，【缺点】useMediaLayout导致render次数多了！
        const widthMount= target.current?.getBoundingClientRect();
        if(!widthMount){
            return new DOMRectReadOnly(0,0,0,0);
        }
        else{
            return  widthMount;
        }
    }
    else{
        return  size;
    }
}



//export function useMeasure(ref: React.MutableRefObject<any>) {  return { bounds };
